<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师管理系统</title>
    <link rel="stylesheet" href="../CSS/注册页面渲染.css">
    <script src="../JS/vue.js"></script>
    
</head>
<body>
    <div class="head">
         <span>图书管理系统</span>
              
    </div>
    <div class="bodyy">
        <div class="container" id="root">
                <!-- 设定登录的入口 -->
                <div class="tit">注册</div>
                <form >
                     <div class="lable">用户名：
                     <input type="text" placeholder="请输入你的用户名"v-model="username" @blur="getName"><br>
                     <span >{{mesName}}</span>
                     </div >
                      <div class="lable1">手机号：
                      <input type="text" placeholder="请输入手机号" v-model="tel" @blur="getTel"><br>
                      <span>{{mestel}}</span>
                    </div>

                    <div class="lable2" >
                    密&nbsp;&nbsp;&nbsp;码：
                    <input class="yzm" type="password" placeholder="密码不能少于六位" v-model="userPwd"@blur="getPwd"><br>
                    <span>{{mesPwd}}</span>
                </div>
                <button @click="register">注册</button>
                </form>
               
                <span><a href="./登录页面.html">返回登录</a></span>
            
         </div>
         <!-- 页面的动画效果 -->
         <div class="square">
             <ul>
                 <li></li>
                 <li></li>
                 <li></li>   
                  <li></li>
                  <li></li>
             </ul>
         </div>
         <div class="circle">
            <ul>
                <li></li>
                <li></li>
                <li></li>   
                 <li></li>
                 <li></li>
            </ul>
        </div>
    </div>
    
    <div class="bottom"></div>
   
</body> 
<script>
    new Vue({
            el:"#root",
            data(){
            return{
        username:'',
        userPwd:'',
        tel:'',
        mesName: '', //存储用户名校验提示内容
        mesPwd: '',  //存储密码校验提示内容
        mestel:''
    }
 },
 methods: {
         // 校验用户名输入是否为空
     getName() {
         var pat= /^[a-zA-Z0-9_]{3,10}$/;
         if (!this.username) {
             this.mesName = '用户名不能为空'
         } else  if(!pat.test(this.username)){
             this.mesName = '用户名为3-10位(字母，数字，下划线)'
         }
         else{
             this.mesName=''
         }
     },
          getTel() {
          var pat = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
         if (!this.tel) {
             this.mestel = '手机号不能为空'
         } else if (!pat.test(this.tel)) {
             this.mestel = '手机号输入有误'
         } else {
             this.mestel = ''
         }
  
     },

     // 校验密码输入是否符合要求
     getPwd() {
         var pat = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,14}$/;
         if (!this.userPwd) {
             this.mesPwd = '密码不能为空'
         } else if (!pat.test(this.userPwd)) {
             this.mesPwd = '密码至少包含小写字母、大写字母和数字且长度不能低于六位'
         } else {
             this.mesPwd = ''
         }
     },
     register(){
          if (this.mesName.length != 0) {
             alert("用户名有误")
         } else if (this.mesPwd.length!= 0) {
             alert("密码不能为空")
         }else if(this.mestel.length!=0){
            alert("手机号有误")
        
         } else {
             axios.post('/user/addUser', {
                 userName: this.username,
                 userPassword: this.userPwd,
                 userTel:this.tel,
                 headers: { 'Content-Type': 'application/x-www-form-urlencoded' }   //跨域
             }).then(function (dat) {
                 if (dat.data == '1') {
                     window.location.href = '/user/successRegister'
                 } else {
                     alert("登录失败")
                 }

             })
         }
     }
    },
    })
        
    
    </script>
</html>